<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="投诉人手机号">
        <el-input
          v-model="queryParams.complaintUserMobile"
          placeholder="请输入投诉人手机号"
          maxlength="11"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="被投诉人手机号">
        <el-input
          v-model="queryParams.beComplaintedMobile"
          placeholder="请输入被投诉人手机号"
          maxlength="11"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="投诉日期">
        <el-date-picker
          v-model="queryParams.complaintRangeDate"
          size="small"
          style="width: 240px"
          format="yyyy-MM-dd"
          value-format="timestamp"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="处理日期">
        <el-date-picker
          v-model="queryParams.handleRangeDate"
          size="small"
          style="width: 240px"
          format="yyyy-MM-dd"
          value-format="timestamp"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="投诉状态">
        <el-select
          style="width: 240px"
          v-model="queryParams.complaintStatus"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statueOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="投诉房源类型">
        <el-select
          style="width: 240px"
          v-model="queryParams.reportType"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in roleCodeOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="投诉入口">
        <el-select
          style="width: 240px"
          v-model="queryParams.complaintsEntrance"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in entranceCodeOptions"
            :key="dict.dictLabel"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table border highlight-current-row v-loading="loading" :data="tableList">
      <el-table-column
        v-for="(item, index) in tableTitles"
        :key="index"
        :label="item.title"
        :width="item.width"
        :fixed="item.fixed"
        align="center"
      >
        <template slot-scope="{ row }">
          <template v-if="item.key == 'complaintProof'">
            <el-popover v-if="row.complaintProof && row.complaintProof.length" placement="left" trigger="click">
              <el-image
                slot="reference"
                :src="row.complaintProof[0]"
                :alt="row.complaintProof[0]"
                style="max-height: 70px; max-width: 100px"
              ></el-image>
              <!-- <el-image fit="cover" :src="row.complaintProof[0]" style="width: 500px"></el-image> -->
              
              <div class="demo-image__lazy" fit="cover">
                <el-image v-for="url in row.complaintProof" :key="url" :src="url" lazy style="width:500px;height:400px"></el-image>
              </div>
            </el-popover>
            <span v-else>---</span>
          </template>
          <template v-else>
            <span>{{ ((item.format ? item.format(row[item.key]) : row[item.key]) || item.default) | showTxt }}</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <template v-for="operate in operations">
            <el-button
              v-if="operate.showHandler(row)"
              :key="operate.name"
              size="mini"
              type="text"
              @click="operationHandler(row, operate.type)"
              >{{ operate.name }}</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog width="1000px" title="投诉处理" :visible.sync="popVisible" :close-on-click-modal="false">
      <complaint-pop
        v-if="popVisible"
        :id="currentId"
        :status="status"
        :currentModel="currentModel"
        :tableName="tableName"
        @togglePop="popVisible = !popVisible"
        @refresh="hanldeRefresh"
      ></complaint-pop>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getComplaintList } from "@/api/reviewActivities/memberManage";
import { formatDateOnly } from "@/utils/index";
import complaintPop from "./complaint-pop";

export default {
  components: {
    complaintPop,
  },
  props: {},
  data() {
    return {
      currentModel: {},
      currentId: "",
      tableName: "",
      status: "1",
      popVisible: false,
      tableList: [],
      total: 0,
      loading: false,
      tableTitles: [
        { title: "投诉入口", width: "120", key: "tableName",fixed:"left",format(v) {
            if (v == 1) return "外呼后评价";
            if (v == 2) return "房源详情打假";
            if (v == 3) return "咨询评价";
          }
        },
        { title: "投诉人", width: "150", key: "complaintUserName" },
        { title: "投诉人手机号", width: "120", key: "complaintUserMobile" },
        { title: "被投诉人", width: "80", key: "beComplaintedUserName" },
        { title: "被投诉人手机号", width: "120", key: "beComplaintedMobile" },
        { title: "投诉房源类型", width: "120", key: "reportType",format(v) {
            if (v == 1) return "虚假房源";
            if (v == 2) return "房源不可合作";
            if (v == 4) return '恶意骗取房源信息';
            if (v == 3) return "其他";
          }
        },
        { title: "房源", width: "120", key: "title" },
        { title: "处理人", width: "120", key: "handleUserName" },
        { title: "投诉时间", width: "160", key: "createTime" },
        { title: "处理时间", width: "160", key: "handleTime" },
        { title: "投诉状态", width: "100", key: "complaintStatus", format: (v) => ["待处理", "已确认", "已驳回"][v] },
        { title: "投诉凭证", width: "100", key: "complaintProof" },
        { title: "服务评价", width: "100", key: "userRating",format(v) {
            if (v == 1) return "非常差";
            if (v == 2) return "一般";
            if (v == 3) return "超赞";
          }},
        { title: "投诉内容", width: "150", key: "complaintRemark" },
      ],
      operations: [
        { type: "1", name: "确认", showHandler: (v) => v.complaintStatus == 0 },
        { type: "2", name: "驳回", showHandler: (v) => v.complaintStatus == 0 },
        { type: "0", name: "处理记录", showHandler: (v) => v.complaintStatus != 0 },
      ],
      statueOptions: [
        { dictValue: "", dictLabel: "全部" },
        { dictValue: "0", dictLabel: "待处理" },
        { dictValue: "1", dictLabel: "已确认" },
        { dictValue: "2", dictLabel: "已驳回" },
      ],
      roleCodeOptions: [
        { dictValue: "", dictLabel: "全部" }, 
        { dictValue: 1, dictLabel: "虚假房源" },
        { dictValue: 2, dictLabel: "房源不可合作" }, 
        { dictValue: 4, dictLabel: "恶意骗取房源信息" }, 
        { dictValue: 3, dictLabel: "其他" }
      ],
      entranceCodeOptions: [
        { dictValue: '', dictLabel: "全部" }, 
        { dictValue: 1, dictLabel: "外呼后评价" },
        { dictValue: 2, dictLabel: "房源详情打假" },  
        { dictValue: 3, dictLabel: "咨询评价" }
      ],
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        complaintUserMobile: "",
        beComplaintedMobile: "",

        complaintRangeDate: [],
        handleRangeDate: [],

        complaintStartTime: "",
        complaintEndTime: "",
        handleStartTime: "",
        handleEndTime: "",

        complaintStatus: "",
        reportType: "",
        complaintsEntrance: "", //投诉入口
      },
    };
  },
  created() {
    this.handleQuery();
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {
    showTxt(txt) {
      return txt ? txt : "--";
    },
    rounding(value) {
      return value.toFixed(2);
    },
  },
  methods: {
    hanldeRefresh() {
      this.popVisible = false;
      this.handleQuery();
    },
    operationHandler(row, type) {
      this.currentModel = row;
      this.status = type;
      this.currentId = row.id;
      this.tableName = row.tableName
      this.popVisible = true;
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList({ page: 1 });
    },
    //查询活动审核列表
    async getList({ page }) {
      this.loading = true;

      const complaintRangeDate = this.queryParams.complaintRangeDate || [];
      const handleRangeDate = this.queryParams.handleRangeDate || [];
      let queryData = {
        complaintUserMobile: this.queryParams.complaintUserMobile,
        beComplaintedMobile: this.queryParams.beComplaintedMobile,
        page: page || this.queryParams.currentPage + 1,
        pageSize: this.queryParams.pageSize,
        complaintStartTime: formatDateOnly(complaintRangeDate[0]) || null,
        complaintEndTime: formatDateOnly(complaintRangeDate[1]) || null,
        handleStartTime: formatDateOnly(handleRangeDate[0]) || null,
        handleEndTime: formatDateOnly(handleRangeDate[1]) || null,
        complaintStatus: this.queryParams.complaintStatus,
        reportType: this.queryParams.reportType,
        tableName:this.queryParams.complaintsEntrance||null
      };

      const res = await getComplaintList(queryData);
      const content = res.data.content;
      this.queryParams.currentPage = queryData.page;
      this.total = content.records;

      this.tableList = content.rows;

      this.loading = false;
    },
  },
};
</script>
<style>
.demo-image__lazy {
    height: 400px;
    width: 520px;
    overflow-y: auto;
}
</style>
